<template>
  <a-card>
    <a-form style="border-bottom: 1px solid #ccc">
      <a-space size="large">
        <a-form-item label="车牌号码:">
          <a-input
            style="width: 220px; border-radius: 4px"
            placeholder="请输入车牌号码"
            v-model:value="params.carNumber"
          ></a-input>
        </a-form-item>
        <a-form-item label="缴纳状态:">
          <a-select v-model:value="params.paymentStatus" style="width: 220px" placeholder="未选择">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">待缴纳</a-select-option>
            <a-select-option value="1">已缴纳</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="getParkingAPI">查询</a-button>
        </a-form-item>
      </a-space>
    </a-form>
    <a-table
      size="small"
      :dataSource="rows"
      :columns="columns"
      :pagination="{
        // 分页数据
        total: total,
        current: params.page,
        'show-total': showTotal,
        showQuickJumper: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        pageSize: params.pageSize,
        onChange: changeCurrent,
        'show-size-changer': true
      }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'chargeType'">
          {{ record.chargeType === 'card' ? '月卡' : '临时停车' }}
        </template>
        <template v-if="column.dataIndex === 'paymentStatus'">
          {{ record.paymentStatus === '0' ? '未缴纳' : '已缴纳' }}
        </template>
        <template v-if="column.dataIndex === 'paymentMethod'">
          <template v-if="record.paymentMethod === 'Alipay'">支付宝</template>
          <template v-else-if="record.paymentMethod === 'WeChat'">微信</template>
          <template v-else>--</template>
        </template>
      </template>
    </a-table>
  </a-card>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getParking } from '@/api/parking.js'
const columns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '车牌号码',
    dataIndex: 'carNumber'
  },
  {
    title: '收费类型',
    dataIndex: 'chargeType'
  },
  {
    title: '停车总时长',
    dataIndex: 'parkingTime'
  },
  {
    title: '缴纳费用（元）',
    dataIndex: 'actualCharge'
  },
  {
    title: '缴纳状态',
    dataIndex: 'paymentStatus'
  },
  {
    title: '缴纳方式',
    dataIndex: 'paymentMethod'
  },
  {
    title: '缴纳时间',
    dataIndex: 'paymentTime'
  }
]
const rows = ref([]) //分页数据
const total = ref(null) //页总数
const params = reactive({
  paymentStatus: '', //缴费状态0未缴纳，1已缴纳
  carNumber: '', //车牌号
  page: '1', //当前页码默认是
  pageSize: '10' //页面大小，默认是10
}) //分页请求的必需

onMounted(async () => {
  // 表示 首次渲染已经完成
  await getParkingAPI()
})

const getParkingAPI = async () => {
  const res = await getParking(params)
  rows.value = res.data.rows.map((el, index) => ({ ...el, index: index + 1 }))
  console.log(rows.value)
  total.value = res.data.total
}
//改变页数
const changeCurrent = async (page, pageSize) => {
  params.page = page
  params.pageSize = pageSize
  await getParkingAPI()
}
const showTotal = () => {
  return `总共${total.value}条`
}
</script>
